<template>
  <el-popover
    placement="bottom"
    width="200"
    trigger="click"
    style="position: absolute; right: 0;"
  >
    <el-button
      style="padding: 7px;"
      slot="reference"
      size="mini"
      icon="el-icon-setting"
    />
    <el-checkbox-group
      @click.stop
      v-model="checked"
      :min="1"
      @change="handleChange"
    >
      <el-dropdown-item
        v-for="label in labels"
        :key="label"
      >
        <el-checkbox :label="label">{{label}}</el-checkbox>
      </el-dropdown-item>
    </el-checkbox-group>
  </el-popover>
</template>

<script>
export default {
  name: "CustomTableColumn",
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      propColumns: this.columns,
      checked: this.columns.filter(item => item.visible).map(item => item.label)
    };
  },
  computed: {
    labels() {
      return this.propColumns.map(item => item.label);
    }
  },
  methods: {
    handleChange() {
      this.propColumns.forEach(item => {
        let index = this.checked.indexOf(item.label);
        item.visible = index !== -1;
      });
      this.$emit("update:columns", this.propColumns);
    }
  }
};
</script>